require("../css/commCss/normalize.less");
require("../css/commCss/reset.less");
require("../css/commCss/property.less");
require("../css/commCss/basic.less");
require("../fonts/iconfont.css");
require("../css/train.less");

//导入weui
require("weui");
const weui = require("weui.js");

//axios请求
const axios = require("axios");

document.addEventListener("DOMContentLoaded", function () {
  /* 获取元素 */
  const videoUrl = document.querySelector("#videoUrl"); //视频
  const imgUrl = document.querySelector("#imgUrl"); //图片
  const title = document.querySelectorAll(".title"); //小标题
  const curNum = document.querySelector("#curNum"); //当前节数
  const totalNum = document.querySelector("#totalNum"); //总节数
  const pause = document.querySelector("#pause"); //暂停
  const videoModal = document.querySelector("#videoModal"); //模态框
  const prev = document.querySelector("#prev"); //上一节
  const next = document.querySelector("#next"); //下一节
  const goOn = document.querySelector("#goOn"); //继续
  const end = document.querySelector("#end"); //结束
  const progress = document.querySelector("#progress"); //结束

  //从会话存储中获取fragments
  let fragments = JSON.parse(sessionStorage.fragments);

  //渲染总节数-fragments的长度
  let allNum = fragments.length;
  totalNum.textContent = allNum;

  //全局索引
  let index = 0;
  //计时器
  let timeId = null;
  //训练时间
  let time = 0;

  //封装数据-渲染
  function randerData() {
    //渲染视频
    videoUrl.src = "http://139.9.177.51:8099" + fragments[index].videoUrl;

    //渲染图片
    imgUrl.src = "http://139.9.177.51:8099" + fragments[index].imgUrl;

    //渲染标题
    title[0].textContent = fragments[index].title;
    title[1].textContent = fragments[index].title;

    //渲染当前节数--索引加一
    curNum.textContent = index + 1;

    //调用进度条函数--视频播放之后调用
    setProgress();
  }
  randerData();

  //点击上一节
  prev.addEventListener("click", function () {
    index--; //索引自减

    if (index < 0) {
      index = allNum - 1;
    }
    randerData(); //调用函数
  });

  //点击下一节
  next.addEventListener("click", function () {
    index++;
    if (index === allNum) {
      index = 0;
    }
    randerData();
  });

  //点击暂停按钮
  pause.addEventListener("click", function () {
    videoUrl.pause(); //视频暂停
    videoModal.style.display = "block"; //显示模态框
    clearInterval(timeId); //清除计时器
  });

  //点击继续按钮
  goOn.addEventListener("click", function () {
    videoModal.style.display = "none"; //隐藏模态框
    videoUrl.play(); //播放视频
    getTime(); //继续计时器
  });

  //点击结束按钮,跳转页面
  end.addEventListener("click", function () {
    // console.log(time);

    //获取参数
    let params = {
      id: sessionStorage.cid,
      userId: localStorage.userId,
      takeTime: time,
      calorie: time * 0.36,
    };
    //发送请求，保存课程数据
    axios.post("http://139.9.177.51:8099/sports/saveTrain", params)
      .then(function (res) {
        if(res.data.status===0){//成功 toFixed(2)保留两位小数
          weui.toast(`消耗了${params.calorie.toFixed(2)}卡路里`,{ 
            callback:function(){
              location.href = "./curse.html";
            }
          })
          
        }else{//失败
          weui.toast('今天也是自律的一天哦!')
        }
      });

    
  });

  //进度条
  function setProgress() {
    timeId = setInterval(function () {
      //获取总时长
      let allTime = videoUrl.duration;
      //获取当前时长
      let curTime = videoUrl.currentTime;

      let allWidth = (curTime * 100) / allTime;

      //把当前的宽度赋值给进度条
      progress.style.width = allWidth + "%";
    }, 30);
  }

  //视频结束 自动播放下一个视频
  videoUrl.addEventListener("ended", function () {
    weui.toast("即将播放下一节课程",1600);

    setTimeout(function () {
      next.click(); //js自己点击
    }, 2000);
  });

  /* 记录训练时间 --每隔一秒，time自增1，暂停时清除计时器(time不会一直计时) 
    继续时-继续计时(调用函数)
  */

  function getTime() {
    timeId = setInterval(function () {
      time++;
    }, 1000);
  }
  getTime();
});
